<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 500px">
      <el-tab-pane label="全部稿件" name="0">

      </el-tab-pane>
      <el-tab-pane label="审核中" name="2"></el-tab-pane>
      <el-tab-pane label="未通过" name="3"></el-tab-pane>
      <el-tab-pane label="已通过" name="1"></el-tab-pane>
    </el-tabs>
    <el-select v-model="value" placeholder="请选择" style="position: relative;left: 80%;top: -50px;width: 110px"
               @change="handleClick2">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-table
        :data="tableData" style="width: 90%;margin-top: -50px">
      <el-table-column prop="videoTitle" width="200px"/>
<!--      <el-table-column prop="price" label="单价"/>-->
      <el-table-column width="200px">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.videoCover"
              :preview-src-list="[scope.row.videoCover]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" >
        <template #default="scope">
          <span v-if="scope.row.videoState==2">进行中</span>
          <el-button v-if="scope.row.videoState==3"  @click="compile(scope.row)">编辑</el-button>
          <span v-if="scope.row.videoState==3" style="color: red">未通过</span>
          <el-button v-if="scope.row.videoState==3"  @click="compile(scope.row)">重新审核</el-button>
          <el-popconfirm  v-if="scope.row.videoState==1"
              title="确定删除吗？"
              @confirm="del(scope.row)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>

          <el-button v-if="scope.row.videoState==1"  @click="compile(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="obj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="obj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>


    <el-dialog @close="handleClose" :visible.sync="dialogVisible" width="60%">

    <el-form ref="form" size="222px" :model="form" label-width="80px" :rules="rules">
      <div v-if="form.videoCover">
        <img src="../assets/img/shangchuanchenggong.jpg"  style="width:100%">
        <i class="el-icon-close icon"   style="position: absolute;left: 90%;top: 100px" @click="click()"  ></i>
      </div>
      <div v-else>
        <el-upload
            class="upload-demo"
            drag
            action="http://localhost:9000/hemo/file/upload" :on-success="filesUploadSuccess"
            multiple>
          <i class="el-icon-upload"></i>·
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <el-form-item label="标题" prop="videoTitle" >
        <el-input style="width: 600px" v-model="form.videoTitle"></el-input>
      </el-form-item>
      <el-form-item label="是否转载" >
        <el-radio disabled  v-model="form.videoVideotype" label="0">否</el-radio>
        <el-radio disabled  v-model="form.videoVideotype" label="1">是</el-radio>
      </el-form-item>
      <el-form-item label="转载地址" v-if="form.videoVideotype==1">
        <el-input  style="width: 200px"  v-model="form.url"></el-input>
      </el-form-item>
      <el-form-item label="封面" prop="videoCover" >
        <img v-if="form.videoCover" :src="form.videoCover" style="width: 150px;height: 150px">
        <span v-else>内容为空！</span>
<!--        <el-upload :ref="form.videoCover" :file-list="form.img" :action="form.videoCover" :on-success="filesUploadSuccess" >-->
<!--          <el-button :disabled="!form.videoCover" type="primary">点击上传</el-button>-->
<!--        </el-upload>-->
      </el-form-item>
      <el-form-item  label="分区" prop="value">
        <div class="block">
          <el-cascader
              disabled
              :options="options2"
              v-model="form.value"
              @change="handleChange"
              :separator="' '"
          >
          </el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="标签">
        <div>
          <el-checkbox-group disabled v-model="form.res">
            <el-checkbox-button  v-for="city in kens" :value="city.videoTagId" :label="city.videoTagId" :key="city.videoTagId">{{city.videoTagName}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <!--        video_suggest-->
      <el-form-item label="推荐文字">
        <el-input style="width: 600px" v-model="form.videoSuggest"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">投稿</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Mvideo",
  data() {
    return {
      iconColor:'blue',
      activeName: '1',
      options: [],
      options2: [],
      value: '全部分区',
      bigzoneId:0,
      pageSize:5,
      pageNum:1,
      currentPage:1,
      obj:{},
      tableData:[],
      form:{
        res: [],
        videoVideotype:'',
      },
      rules:{
        videoTitle: [{required: true, message: '标题不能为空', trigger: 'blur'}],
        videoCover: [{required: true, message: '视频不能为空', trigger: 'blur'}]
      },
      dialogVisible: false,
      kens:[],
      user: {},
      lf: true
    }
  },
  created() {
    this.load();
  },
  methods: {
    mou(){
      this.lf=false

    },
    mou1(){
      this.iconColor='black'

    },
    mou2(){
      this.iconColor='black'
      this.lf=false
    },
    load() {
      this.$http.get("hemo/system/bigzone/findAll").then(r => {
        var a = []
        a.push({
          value: 0,
          label: '全部分区'
        })
        for (let i = 0; i < r.data.data.length; i++) {
          a.push({
            value: r.data.data[i].bigzoneId,
            label: r.data.data[i].bigzoneName
          })
        }
        this.options = a
      })
      let user = sessionStorage.getItem("user")
      this.user= JSON.parse(user)
      this.$http.get("hemo/system/video/Submission?userId="+this.user.userId+"&bigzoneId="+this.bigzoneId+"&=videoState="+this.activeName
      +"&pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(r => {
        this.tableData=r.data.list
        this.obj=r.data
      })
    },
    filesUploadSuccess(res){
      console.log(res);
      this.$message({
        type: "success",
        message: '上传成功！'
      })
      this.form.videoCover = res.name
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      console.log(pageSize)
      this.load()
    },
    handleCurrentChange(pageNum){

      this.pageNum = pageNum
      this.load()
    },
    handleClick(tab, event) {
      console.log(this.activeName);
      this.load();
    },
    handleClick2() {
      this.bigzoneId=this.value
      this.load();

    },
    compile(row){
      console.log(row.videoId)
      this.$http.get('hemo/system/video/animatedRandomVideoById?videoId='+row.videoId).then(r=>{
        this.form=r.data.data
        this.form.value=r.data.data.smallzone.smallzoneId
        this.form.videoVideotype=''+r.data.data.videoVideotype
        this.options2.push({
          value:r.data.data.smallzone.smallzoneId,
          label:r.data.data.smallzone.smallzoneName
        })
        console.log(this.form)
      })
      this.$http.get('hemo/system/tag/findAllByUIdAndVid?vId='+row.videoId+"&uId="+this.user.userId).then(r=>{
        this.kens=r.data.data
        console.log(r.data.data)
      })
      this.dialogVisible=true
    },
    handleClose(){
      this.dialogVisible=false
      this.kens=[]
    },
    onSubmit(){
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          this.$message({
            type: "error",
            message: '数据填写不正确！'
          })
        } else {
          if(!this.form.videoSuggest){
            this.form.videoSuggest=''
          }
          let user = sessionStorage.getItem("user")
          var users= JSON.parse(user)
          this.$http.get("hemo/system/video/update?videoTitle="+this.form.videoTitle+"&videoSuggest="+this.form.videoSuggest+"&vId="+this.form.videoId)
              .then(r=>{
              //                  DeliveringSuccessful
                this.$router.push(`/DeliveringSuccessful`);
              })
        }
      })
    },
    handleChange(){

    },
    exit(){
      this.dialogVisible=false
      this.kens=[]
    },
    hand2leClick(){

    },
    del(item){
      this.$http.get('hemo/system/video/delVideo?videoId='+item.videoId).then(r=>{
        this.$message.success('删除成功');
        this.load();

      })
    },
    click(){
      this.$http.get('hemo/system/video/updateVideo?videoId='+this.form.videoId).then(r=>{})

      this.$http.get('hemo/system/video/animatedRandomVideoById?videoId='+this.form.videoId).then(r=>{
        this.form=r.data.data
        this.form.value=r.data.data.smallzone.smallzoneId
        this.form.videoVideotype=''+r.data.data.videoVideotype
        this.options2.push({
          value:r.data.data.smallzone.smallzoneId,
          label:r.data.data.smallzone.smallzoneName
        })
        console.log(this.form)
    })}
  }
}
</script>

<style scoped>
.icon:hover{
  color: blue;
  cursor:pointer;
}
.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
